
<template>
  <div id="main">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" @click="getBack" alt class="img_zuo" />
        <div>点位巡查</div>
      </div>
    </header>
    <div id="ditu"></div>

    <div class="panel">
    	<div class="panel-item">
    		<div class="left">位置</div>
    		<div class="right"><button class="create-btn" @click="createBiaodian">创建</button></div>
    	</div>
    	<div class="panel-item" v-show="jd_mc||jd_mc===0">
    		<div class="left">街道</div>
    		<div class="right"><input class="jdmc" type="text" name="jdmc" placeholder="" readonly="readonly" v-model="jd_mc" /></div>
      </div>
    	<div class="panel-item" v-show="sq_mc||sq_mc===0">
    		<div class="left">社区</div>
    		<div class="right"><input class="sqmc" type="text" name="sqmc" placeholder="" readonly="readonly" v-model="sq_mc" /></div>
      </div>
    	<div class="panel-item qiyeitem" v-show="qy_mc||qy_mc===0">
    		<div class="left">企业单位</div>
    		<div class="right"><input class="qiye" type="text" name="qiye" placeholder="" readonly="readonly" v-model="qy_mc" /></div>
    	</div>
    	<div class="panel-item">
    		<div class="left">名称</div>
    		<div class="right"><input class="mc" type="text" name="mc" placeholder="请输入" maxlength="10" v-model="title" /></div>
    	</div>
    	<div class="panel-item">
    		<div class="left">类别</div>
    		<div class="right panel-select" id="lb">
    			<input class="lb" type="text" name="lb" placeholder="请选择" readonly="readonly" v-model="lb_mc" @click="openTk" />
    			<img src="../../assets/images/dwxc/j.png">
    		</div>
    	</div>
    	<div class="day-selector">
    		<div v-for="(day,index) of days" :key="index" class="day-item" :class="{'active':day.active}" @click="checkedDay(index)">{{day.mc}}</div>
    	</div>
    	<div class="date-piker">
    		<span class="date-wz">开始时间&nbsp;</span>
    		<button id="qdate" @click="clickDate('qdate')"><span>{{time1}}</span><img src="../../assets/images/dwxc/sj.png" class="rq_img1"></button>
    		<div class="line">——</div>
    		<button id="zdate" @click="clickDate('zdate')"><span>{{time2}}</span><img src="../../assets/images/dwxc/sj.png" class="rq_img1"></button>
    	</div>
    	<div class="date-piker">
    		<span class="date-wz">结束时间&nbsp;</span>
    		<button id="qdate1" @click="clickDate('qdate1')"><span>{{time3}}</span><img src="../../assets/images/dwxc/sj.png" class="rq_img1"></button>
    		<div class="line">——</div>
    		<button id="zdate1" @click="clickDate('zdate1')"><span>{{time4}}</span><img src="../../assets/images/dwxc/sj.png" class="rq_img1"></button>
    	</div>
    </div>
    <div class="btns">
    	<button class="btn" id="queding" @click="save">确定</button>
    </div>

    <van-popup v-model="btm_show" position="bottom">
      <van-datetime-picker v-model="currentTime" type="time" @confirm="confirm_picker" @cancel="cancel_picker" />
    </van-popup>

    <div class="tk" v-show="tk_show">
    	<div class="bg" @click="closeTk"></div>
    	<div class="tk-box">
        <div class="tk-item option" v-for="(item,index) of tk_list" @click="checkedTk(item)">
        	<div class="left">{{item.mc}}</div>
        	<div class="right"></div>
        </div>
    	</div>
    </div>

  </div>
</template>
<script>
	import { Dialog } from "vant";
  import utils from "../../assets/js/utils.js"
  import terminal from "../../assets/js/terminal";
  export default {
    name: "dwxc_6",
    data() {
      return {
        map:null,
        markers:[],
        polylineArr:[],
        userMarker:null,
        days:[],
        time1:null,
        time2:null,
        time3:null,
        time4:null,
        currentTime: '',
        currentTimeType:'',
        btm_show: false,//是否显示底部弹框
        jd_id:'',
        jd_mc:'',
        sq_id:'',
        sq_mc:'',
        type_list:[],
        tk_show:false,
        tk_list: [], //弹框列表
        lb_mc:'',
        lb_id:'',
        title:'',
        qy_id:null,
        qy_mc:null,
        userId:null,
        username:null,
        doing:false,
        terminal: false,
        timer:null
      };
    },
    methods: {
        getBack () {//返回
          // this.$router.push('/dwxc_2_Pointcreation');
          this.$router.back()
        },
        createMap(){//创建地图
          var _this = this;
          _this.map = new AMap.Map('ditu',{
          	zoomEnable: true, //地图是否可缩放，默认值为true
          });
          // 传入经纬度，设置地图中心点
          //渝中区106.57,29.55
          //杨家坪106.512339,29.505386
          var position = new AMap.LngLat(_this.$global_msg.centerJwd.jd,_this.$global_msg.centerJwd.wd);  // 标准写法
          _this.map.setCenter(position);
          // 设置地图级别，级别为数字。
          // PC上，参数zoom可设范围：[3,18]；
          // 移动端：参数zoom可设范围：[3,19]
          _this.map.setZoom(15);

          //地图点击事件
          _this.map.on('click', function(ev) {
          	// 触发事件的对象
            var target = ev.target;
            // 触发事件的地理坐标，AMap.LngLat 类型
            var lnglat = ev.lnglat;
            // 触发事件的像素坐标，AMap.Pixel 类型
            var pixel = ev.pixel;
            // 触发事件类型
            var type = ev.type;

            //清楚所有标点
            // for(var n=0;n<_this.markers.length;n++){
            //   _this.map.remove(_this.markers[n]);
            // }

            /*if (_this.markers.length > 0) {
            	var list = [];
            	for (var n = 0; n < _this.markers.length; n++) {
            		list.push([_this.markers[n].jwdObj.jd,_this.markers[n].jwdObj.wd]);
            	}
              var flag = _this.checkJuli(list,lnglat);
              if(flag){
                var obj = {
                  jwd:lnglat.lng+','+lnglat.lat
                };
                //创建标点
                _this.biaodian(obj);
              }else{
                _this.$toast('两个点距离过近');
              }
            } else {
            	var obj = {
            	  jwd:lnglat.lng+','+lnglat.lat
            	};
              //创建标点
              _this.biaodian(obj);
            }*/

          });
          _this.startGeolocation();
        },
        startGeolocation(){//开始定位
          var _this = this;
          clearInterval(_this.geolocation_timer);
          _this.geolocation_timer = null;
          _this.map.plugin('AMap.Geolocation', function() {
              var geolocation = new AMap.Geolocation({
                  // 是否使用高精度定位，默认：true
                  enableHighAccuracy: true,
                  // 设置定位超时时间，默认：无穷大
                  //timeout: 10000,
                  // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                  //buttonOffset: new AMap.Pixel(10, 20),
                  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                  //zoomToAccuracy: false,
                  //  定位按钮的排放位置,  RB表示右下
                  //buttonPosition: 'RB'
               })

              // 监听获取位置信息成功的回调函数
              AMap.event.addListener(geolocation, 'complete', onComplete);
              // 监听获取位置信息错误的回调函数
              AMap.event.addListener(geolocation, 'error', onError);

              function usePosition(lng,lat){
                //console.log('定位',data);
                //data.position
                var position = {};
                if(_this.terminal !== true){
                  position = utils.getGpsPosition(lng,lat);
                }else{
                  position = new AMap.LngLat(lng,lat);
                }
                if(_this.userMarker){
                  _this.userMarker.setPosition(position);
                  _this.map.setCenter(position);
                }else{
                  //创建标点
                  _this.markUser(position);
                }
              }

              function onComplete (data) {
                usePosition(data.position.lng,data.position.lat);
              }

              function onError (error) {
                  // 定位出错
                  //console.log(error)
                  if(error.message=='Geolocation permission denied.'){
                    //_this.tishiDw();
                  }
                  utils.getPosition(function(lng,lat){
                    console.log('切换使用sdk获取定位成功:'+lng+','+lat);
                    usePosition(lng,lat);
                  },function(msg){
                    console.log('获取定位错误:'+msg);
                  });
              }
              // geolocation.getCurrentPosition();
              //     _this.geolocation_timer =  setInterval(function(){
              //       // 获取当前位置信息
              //       geolocation.getCurrentPosition();
              //     },1000);
              function startGetDw(){
                plus.geolocation.getCurrentPosition(function(p) {
                  geolocation.getCurrentPosition();
                  _this.geolocation_timer =  setInterval(function(){
                    // 获取当前位置信息
                    geolocation.getCurrentPosition();
                  },1000);
                }, function(e) {
                	_this.tishiDw();
                });
              }
              if(plus){
              	startGetDw();
              }else{
              	document.addEventListener('plusready',function(){
                  startGetDw();
                },false);
              }
              // 自动适配到合适视野范围
              // 无参数，默认包括所有覆盖物的情况
              _this.map.setFitView();
          })
        },
        tishiDw(){
          var _this = this;
          var isAndroid = terminal.terminals().android;
          Dialog.confirm({
            title: '提示',
            message: '请打开定位',
            confirmButtonText: "去设置", //改变确认按钮上显示的文字
            cancelButtonText: "取消" //改变取消按钮上显示的文字
          }).then(() => {
            //console.log("点击了确认按钮噢")
            if(isAndroid){//安卓系统
              var main = plus.android.runtimeMainActivity();
              var Intent = plus.android.importClass("android.content.Intent");
              var mIntent = new Intent('android.settings.LOCATION_SOURCE_SETTINGS');
              main.startActivity(mIntent);
            }else{//IOS系统
              var UIApplication = plus.ios.import("UIApplication");
              var NSURL = plus.ios.import("NSURL");
              var setting = NSURL.URLWithString("app-settings:");
              var application = UIApplication.sharedApplication();
              application.openURL(setting);
              plus.ios.deleteObject(setting);
              plus.ios.deleteObject(application);
            }
          }).catch(() => {
            //console.log("点击了取消按钮噢")
          });
          _this.stopGeolocation();
        },
        stopGeolocation(){//停止定位
          clearInterval(this.geolocation_timer);
          clearInterval(this.timer);
          this.geolocation_timer = null;
          this.timer = null;
        },
        markUser(lnglat){//用户标点
          var _this = this;
          var img_url = require('../../assets/images/dwxc/dwpc_25.gif');
          var content = '';
          content+='<div class="user" style="text-align:center;margin-top:0.462962rem;">';
          	content+='<img style="width: 0.379629rem;height: 0.462962rem;" src="'+img_url+'"/>';
          content+='</div>';
          // 创建一个 Marker 实例：
          var marker = new AMap.Marker({
          	position: lnglat,// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          	//title: '标点',
          	content: content,
            zIndex:11
          });
          // 设置点标记的动画效果，此处为弹跳效果
          //marker.setAnimation('AMAP_ANIMATION_BOUNCE');
          // 将创建的点标记添加到已有的地图实例：
          //marker.dataObj = obj;
          _this.map.add(marker);
          _this.userMarker = marker;
          _this.map.setCenter(lnglat);
        },
        biaodian(obj){//标点
          var _this = this;
          var img_url = require('../../assets/images/dwxc/dwpc_19.gif');

          var content = '';
          content+='<div style="text-align:center;margin-top:0.11044658064516133rem;margin-left: -0.1111rem;">';
          	content+='<img style="width: 0.6019rem;height:0.8154774193548386rem;" src="'+img_url+'"/>';
          content+='</div>';
          // 创建一个 Marker 实例：
          var lnglat = obj.jwd.split(',');
          var marker = new AMap.Marker({
          	position: lnglat,// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          	//title: '标点',
          	content: content,
            zIndex:10
          });
          // 设置点标记的动画效果，此处为弹跳效果
          //marker.setAnimation('AMAP_ANIMATION_BOUNCE');
          // 将创建的点标记添加到已有的地图实例：
          marker.dataObj = obj;
          marker.dataObj = obj;
          marker.jwdObj = {
            jd:lnglat[0],
            wd:lnglat[1]
          };
          _this.map.add(marker);
          _this.markers.push(marker);
          //_this.map.setFitView();

          if (_this.markers.length > 1) {
          	// 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
            var jd = _this.markers[_this.markers.length - 2].jwdObj.jd;
            var wd = _this.markers[_this.markers.length - 2].jwdObj.wd;
            var path = [
                new AMap.LngLat(jd,wd),
                new AMap.LngLat(lnglat[0],lnglat[1])
            ];
            // 创建折线实例
            var polyline = new AMap.Polyline({
                path: path,
                borderWeight: 2, // 线条宽度，默认为 1
                strokeColor: '#ffb400', // 线条颜色
                lineJoin: 'round' // 折线拐点连接处样式
            });

            // 将折线添加至地图实例
            _this.map.add(polyline);
            _this.polylineArr.push(polyline);

          }
          // 自动适配到合适视野范围
          // 无参数，默认包括所有覆盖物的情况
          //_this.map.setFitView();

        },
        clickDate(type){
          var _this = this;
          var dtPicker = null;
          if(type=='qdate'){
            _this.currentTime = _this.time1?_this.time1:utils.dateFormat(new Date(),'HH:mm');
          }else if(type=='zdate'){
            _this.currentTime = _this.time2?_this.time2:utils.dateFormat(new Date(),'HH:mm');
          }else if(type=='qdate1'){
            _this.currentTime = _this.time3?_this.time3:utils.dateFormat(new Date(),'HH:mm');
          }else if(type=='zdate1'){
            _this.currentTime = _this.time4?_this.time4:utils.dateFormat(new Date(),'HH:mm');
          }
          _this.currentTimeType = type;
          _this.btm_show = true;
        },
        confirm_picker(){
          var _this = this;
          if(_this.currentTimeType=='qdate'){
            if (_this.time2 < _this.currentTime && _this.time2 != null) {
            	_this.$toast('不能大于开始时间的结束时间');
            	_this.time1 = null;
            } else if ((_this.time3 < _this.currentTime || _this.time4 < _this.currentTime) && (_this.time3 != null || _this.time4 != null)) {
            	_this.$toast('不能大于结束时间');
            	_this.time1 = null;
            }else{
              _this.time1 = _this.checkNull(_this.currentTime)?'00:00':_this.currentTime;
            }
          }else if(_this.currentTimeType=='zdate'){
            if (_this.currentTime < _this.time1 && _this.time1 != null) {
            	_this.$toast('不能小于开始时间的起始时间');
            	_this.time2 = null;
            } else if ((_this.time3 < _this.currentTime || _this.time4 < _this.currentTime) && (_this.time3 != null || _this.time4 != null)) {
            	_this.$toast('不能大于结束时间');
            	_this.time2 = null;
            }else{
              _this.time2 = _this.checkNull(_this.currentTime)?'00:00':_this.currentTime;
            }
          }else if(_this.currentTimeType=='qdate1'){
            if ((_this.currentTime < _this.time2 || _this.currentTime < _this.time1) && (_this.time2 != null || _this.time1 != null)) {
            	_this.$toast('不能小于开始时间');
            	_this.time3 = null;
            } else if (_this.currentTime > _this.time4 && _this.time4 != null) {
            	_this.$toast('不能大于结束时间终止时间');
            	_this.time3 = null;
            }else{
              _this.time3 = _this.checkNull(_this.currentTime)?'00:00':_this.currentTime;
            }
          }else if(_this.currentTimeType=='zdate1'){
            if ((_this.currentTime < _this.time2 || _this.currentTime < _this.time1) && (_this.time2 != null || _this.time1 != null)) {
            	_this.$toast('不能小于开始时间');
            	_this.time4 = null;
            } else if (_this.time3 > _this.currentTime && _this.time3 != null) {
            	_this.$toast('不能小于结束时间起始时间');
            	_this.time4 = null;
            }else{
              _this.time4 = _this.checkNull(_this.currentTime)?'00:00':_this.currentTime;
            }
          }
          _this.cancel_picker()
        },
        cancel_picker(){
          this.currentTime = '';
          this.currentTimeType = '';
          this.btm_show = false;
          this.$forceUpdate();
        },
        checkJuli(list,one){
          var keyi_num = 0;
          for(var n=0;n<list.length;n++){
            var dis = AMap.GeometryUtil.distance(list[n], one);
            if(dis>5){
              keyi_num++;
            }
          }
          if (keyi_num === list.length) {
          	return true;
          } else {
          	return false;
          }
        },
        createBiaodian(){
          var _this = this;
          try{
            plus.nativeUI.showWaiting("正在加载...");
          }catch(e){
            console.log(e.message);
          }
          _this.timer = setInterval(function(){
            if(_this.userMarker){
              clearInterval(_this.timer);
              _this.timer = null;

              var flag = false;
              var position = _this.userMarker.getPosition();
              if (_this.markers.length > 0) {
              	var list = [];
              	for (var n = 0; n < _this.markers.length; n++) {
              		list.push([_this.markers[n].jwdObj.jd,_this.markers[n].jwdObj.wd]);
              	}
                flag = _this.checkJuli(list,position);
              } else {
              	flag = true;
              }
              if(flag){
                var obj = {
                  jwd:position.lng+','+position.lat
                };
                //创建标点
                _this.biaodian(obj);
              }else{
                _this.$toast('两个点距离过近');
              }
              try{
                plus.nativeUI.closeWaiting();
              }catch(e){
                console.log(e.message);
              }
            }
          },100);


        },
        openTk(){
          if(this.type_list.length>1){
            this.tk_list = this.type_list;
            this.tk_show = true;
          }else{
            this.lb_id = this.type_list[0].id;
            this.lb_mc = this.type_list[0].mc;
          }
          this.$forceUpdate();
        },
        checkedTk(item){
          this.lb_id = item.id;
          this.lb_mc = item.mc;
          this.closeTk();
        },
        closeTk(){
          this.tk_list = [];
          this.tk_show = false;
          this.$forceUpdate();
        },
        checkedDay(index){
          this.days[index].active = !this.days[index].active;
          this.$forceUpdate();
        },
        checkNull(value){//检测是否为空
          if(value||value===0||value==='0'){
            return false;
          }else{
            return true;
          }
        },
        save(){
          var _this = this;
          if (_this.doing == true) {
          	return;
          }

          var jwd_str = '';
          for(var n=0;n<_this.markers.length;n++){
            jwd_str +=  _this.markers[n].jwdObj.jd+','+_this.markers[n].jwdObj.wd+'|';
          }
          if (jwd_str.length > 0) {
          	jwd_str=jwd_str.substring(0,jwd_str.length-1);
          } else {
            _this.$toast('请创建位置');
            return;
          }

          if(_this.checkNull(_this.title)){
            _this.$toast('请输入名称');
            return;
          }else{
            if(_this.title.length > 10){
              _this.$toast('名称长度不能超过10个字符');
              return;
            }
          }

          if(_this.checkNull(_this.lb_id)){
            _this.$toast('请选择类别');
            return;
          }

          var SpotInspection_location = ''
          for(var n=0;n<_this.days.length;n++){
            if(_this.days[n].active){
              SpotInspection_location +=  _this.days[n].id+'|';
            }
          }
          if (SpotInspection_location.length > 0) {
          	SpotInspection_location=SpotInspection_location.substring(0,SpotInspection_location.length-1);
          }

          if(_this.checkNull(_this.qy_mc)){
            if(_this.checkNull(SpotInspection_location)){
              _this.$toast('请选择日期');
              return;
            }
            if(_this.checkNull(_this.time1)||_this.checkNull(_this.time2)){
              _this.$toast('请选择开始时间');
              return;
            }
            if(_this.checkNull(_this.time3)||_this.checkNull(_this.time4)){
              _this.$toast('请选择结束时间');
              return;
            }
          }


          _this.doing == true;

          try{
            plus.nativeUI.showWaiting("正在加载...");
          }catch(e){
            console.log(e.message);
          }
          var params = {
            spotInspectionDayDataid:SpotInspection_location,//每周巡查日 |隔开的数组
            spotInspectionLocation:jwd_str,//点位巡查具体某几个位置 |隔开的数组
            beginTime:_this.time1,//开始时间的前段时间
            endTime:_this.time2,//开始时间的后段时间
            beginTime1:_this.time3,//结束时间的前段时间
            endTime1:_this.time4,//结束时间的后段时间
            lxDataId:_this.lb_id,//类型编号
            userName:_this.username,//用户姓名
            userId:_this.userId,//用户id
            title:_this.title,
            sqid:_this.sq_id,
            jdid:_this.jd_id,
            scid:_this.qy_id,
            scmc:_this.qy_mc
          };
          console.log(params);
          _this.axios.get(_this.$global_msg.Url.host + "/DotPlacePatrol/addSpotInspection",{
          	params: params
          }).then(function (data) {
            try{
              plus.nativeUI.closeWaiting();
            }catch(e){
              console.log(e.message);
            }
            console.log('/DotPlacePatrol/getSheQuByDwId:',data);
            if(data&&data.data){
              if(data.data.code==200){
                _this.$toast({
                  message: '创建成功',
                  forbidClick:true,
                  onClose: () => {
                    _this.getBack();
                  }
                })
              }else{
                _this.$toast(data.data.msg);
                _this.doing == false;
              }
            }else{
              _this.$toast('创建失败');
              _this.doing == false;
            }
          }).catch(err=>{
              this.$terminal._error(err)
          })
        },
        getInit(){
          var _this = this;
          try{
            plus.nativeUI.showWaiting("正在加载...");
          }catch(e){
            console.log(e.message);
          }
          var params = {
            userId:_this.userId
          };
          _this.axios.get(_this.$global_msg.Url.host + "/DotPlacePatrol/insertGetSpotInspectioPageData",{
          	params: params
          }).then(function (data) {
            try{
              plus.nativeUI.closeWaiting();
            }catch(e){
              console.log(e.message);
            }
            console.log('/DotPlacePatrol/insertGetSpotInspectioPageData:',data);
            if(data&&data.data){
              if(data.data.code==200){
                if(data.data.rows){

                  _this.days = data.data.rows.day;
                  for(var n=0;n<_this.days.length;n++){
                    _this.days[n].id = _this.days[n].dataid;
                  }

                  if(data.data.rows.jiedao&&data.data.rows.jiedao.length==1){
                    _this.jd_id = data.data.rows.jiedao[0].id;
                    _this.jd_mc = data.data.rows.jiedao[0].jc;
                  }else{
                    _this.jd_id = null;
                    _this.jd_mc = null;
                  }

                  if(data.data.rows.shequ&&data.data.rows.shequ.length==1){
                    _this.sq_id = data.data.rows.shequ[0].id;
                    _this.sq_mc = data.data.rows.shequ[0].jc;
                  }else{
                    _this.sq_id = null;
                    _this.sq_mc = null;
                  }

                  if(data.data.rows.qiyi&&data.data.rows.qiyi.length==1){
                    _this.qy_id = data.data.rows.qiyi[0].id;
                    _this.qy_mc = data.data.rows.qiyi[0].jc;
                  }else{
                    _this.qy_id = null;
                    _this.qy_mc = null;
                  }

                  _this.type_list = data.data.rows.type;
                  for(var n=0;n<_this.type_list.length;n++){
                    _this.type_list[n].id = _this.type_list[n].dataid;
                  }

                }
              }else{
                _this.$toast(data.data.msg);
              }
            }else{
              _this.$toast('查询失败');
            }
            _this.$forceUpdate();
          });
        },
        init(){//初始化
          var _this = this;
          //localStorage.setItem("userId",2789);//区级
          //localStorage.setItem("userId",55);//街道
          //localStorage.setItem("userId",57);//社区
          _this.userId = localStorage.getItem("userId"); //用户id
          _this.username = localStorage.getItem('username');
          console.log(terminal.terminals());
          _this.terminal = terminal.terminals().android;
          //_this.terminal = false;

          if(_this.map){
            if(_this.userMarker){
              _this.map.remove(_this.userMarker);
            }
            _this.userMarker = null;
            _this.startGeolocation();
            _this.map.remove(_this.markers);
            _this.map.remove(_this.polylineArr);
            // 自动适配到合适视野范围
            // 无参数，默认包括所有覆盖物的情况
            _this.map.setFitView();
          }else{
            _this.userMarker = null;
            var AMap_timer = setInterval(function(){
              if(AMap){
                clearInterval(AMap_timer);
                _this.createMap();
              }
            },100);
          }
          _this.markers = [];
          _this.polylineArr = [];
          _this.jd_id = null;
          _this.jd_mc = null;
          _this.sq_id = null;
          _this.sq_mc = null;
          _this.qy_id = null;
          _this.qy_mc = null;
          _this.time1 = null;
          _this.time2 = null;
          _this.time3 = null;
          _this.time4 = null;
          _this.title = null;
          _this.doing == false;
          _this.getInit();
        }
    },
    beforeRouteLeave(to, from, next) {
        this.stopGeolocation();
        next();
    },
    //进入该页面时
    beforeRouteEnter (to, from, next) {
        next(vm => {
          vm.init();
        })
    },
    mounted() {
      var _this = this;
      //this.init();

      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.getBack();
      // }, false);
    },
    created() {

    }
  };
</script>
<style scoped>
  /*整个页面*/
  * {
  	padding: 0;
  	margin: 0;
  	font-family: "华文黑体", "Arial", "微软雅黑", "黑体", "思源黑体";
  	font-size: 0.3888888888888889rem;
  }
  #main{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
  }

  /* 导航 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }


  /* 地图 */
  #ditu {
  	height: 7rem;
  	width: 100%;
  }

  /* 面板 */
  .panel {
  	width: 100%;
  	background-color: #FFFFFF;
  	display: flex;
  	/* flex-direction: column; */
  	font-size: 0.388888rem;
  	overflow-y: auto;
  	flex-wrap: wrap;
  	box-sizing: border-box;
  	/* padding-top: 0.7407rem; */
    flex: 1;
  }

  /* 表单 */
  .panel-item {
  	width: 100%;
  	height: 1.3889rem;
  	display: flex;
  	align-items: center;
  	border-bottom: 1px #eeeeee solid;
  }

  .panel-item .left {
  	width: 1.574074rem;
  	/* height: 100%; */
  	margin-left: 0.37037rem;
  	display: flex;
  	align-items: center;
  	justify-content: flex-start;
  }

  .panel-item .right {
  	flex: 1;
  	/* height: 100%; */
  	display: flex;
  	align-items: center;
  	justify-content: flex-end;
  }

  .panel-item .right .create-btn {
  	width: 1.907407rem;
  	height: 0.74074rem;
  	margin-right: 0.37037rem;
  	background-color: #2c61fe;
  	color: #FFFFFF;
  	border-radius: 0.925925rem;
  	font-size: 0.388888rem;
  }

  .panel-item .right input {
  	flex: 1;
  	height: auto;
  	margin-right: 0.37037rem;
  	margin-left: 0;
  	margin-top: 0;
  	margin-bottom: 0;
  	padding-right: 0.185185rem;
  	text-align: right;
  	border: none;
  	padding-bottom: 0;
  	padding-top: 0;
  	padding-left: 0;
  }

  .panel .panel-select input {
  	margin-right: 0;
  }

  .panel .panel-select img {
  	width: 0.185185rem;
  	height: 0.342592rem;
  	margin-right: 0.555555rem;
  }

  /* 星期选择器 */
  .day-selector {
  	width: 100%;
  	height: 1.259259rem;
  	display: flex;
  	background-color: #f2f2f2;
  	align-items: flex-end;
  }

  .day-selector .day-item {
  	flex: 1;
  	height: 1.111111rem;
  	background-color: #7ac0fe;
  	color: #FFFFFF;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  }

  .day-selector .active {
  	background-color: #2c61fe;
  }

  /* 时间选择器 */
  .date-piker {
  	margin-top: 0.222222rem;
  	margin-bottom: 0.222222rem;
  	display: flex;
  	/* padding: 0 1.5rem; */
  	padding: 0 0.3704rem;
  	justify-content: center;
  	width: 100%;
  	align-items: center;
  }

  .date-piker button {
  	width: 3.351851rem;
  	height: 1.074074rem;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	border-radius: 0.925925rem;
    border: 1Px solid #ccc;
  }

  .date-piker button span {
  	margin-left: 0.648148rem;
  }

  .date-piker button img {
  	width: 0.462962rem;
  	height: 0.462962rem;
  	margin-right: 0.166666rem;
  }

  .date-piker .line {
  	flex: 1;
  	height: 1.074074rem;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	font-size: 0.25rem;
  	color: #7d7d7d;
  }

  .date-piker-btn {
  	width: 2.055555rem;
  	height: 1.074074rem;
  	background-color: #2c61fe;
  	color: #FFFFFF;
  	border-radius: 0.925925rem;
  	font-size: 0.388888rem;
  	margin-right: 0.074074rem;
  	margin-left: 0.148148rem;
  }
  .date-wz{
    margin-right: 0.185185rem;
  }

  /*最下面确定按钮*/
  .btns {
  	width: 100%;
  	display: flex;
  	justify-content: center;
  	background-color: #f2f2f2;
  	align-items: center;
  	padding: 0.1852rem 0;
  }

  .btns .btn {
  	width: 8.759259rem;
  	height: 1.074074rem;
  	background-color: #2c61fe;
  	color: #FFFFFF;
  	border-radius: 0.222222rem;
  }

  /* 修改时间选择器样式 */
  .mui-dtpicker-title {
  	display: none;
  }

  .mui-dtpicker-header {
  	border-bottom: solid 1px #f0f0f0;
  }

  [data-id="picker-y"],
  [data-id="picker-m"],
  [data-id="picker-d"],
  [data-id="picker-h"],
  [data-id="picker-i"] {
  	background-color: #FFFFFF;
  }

  [data-id="btn-cancel"],
  [data-id="btn-ok"] {
  	color: #007aff;
  	border: none;
  	background-color: #FFFFFF;
  }

  [data-type="date"],
  [data-type="datetime"],
  [data-type="time"],
  [data-type="month"],
  [data-type="hour"] {
  	background-color: #FFFFFF;
  }


  .panel-item .mc {
  	width: 5rem;
  	flex: none !important;
  	text-align: left !important;
  }

  /* 弹框 */
  .tk{
  	width: 100%;
  	height: 100vh;
  	position: fixed;
  	top: 0;
  	left: 0;
  	z-index: 100;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  }
  .tk-hide{
  	display: none !important;
  }
  .tk .bg {
  	background: rgba(0, 0, 0, 0.4);
  	width: 100%;
  	height: 100vh;
  	position: fixed;
  	top: 0;
  	left: 0;
  	z-index: 101;
  }
  .tk .tk-box{
  	width: 8.333333rem;
  	height: auto;
  	background-color: #FFFFFF;
  	z-index: 102;
  	border-radius: 0.222222rem;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
  }
  .tk .tk-item{
  	width: auto;
  	height: 1.388888rem;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	border-bottom: 1px #DDDDDD solid;
  	margin-left: 0.333333rem;
  	margin-right: 0.333333rem;
  }
  .tk .tk-item .left{
  	width: 2rem;
  	height: 100%;
  	display: flex;
  	align-items: center;
  	justify-content: flex-start;
  }
  .tk .tk-item .right{
  	flex: 1;
  	height: 100%;
  	display: flex;
  	align-items: center;
  	justify-content: flex-end;
  }
  .tk .tk-item .right input{
  	width: 100%;
  	height: 100%;
  	border: none;
  	margin: 0;
  	padding: 0;
  	text-align: right;
  }
  .tk .tk-item .close{
  	width: 0.37037rem;
  	height: 0.37037rem;
  }
  .tk .tk-list{
    flex: 1;
    width: 100%;
    overflow-y: scroll;
  }
  .tk .active{
    color: #2a6cfe;
  }
</style>
